<template>
  <div class="school_infs">
    <Card>
      <p slot="title">
        <Icon type="navicon-round"></Icon>
        报告管理
      </p>
      <Row type="flex" justify="space-between">
        <div>
          <div class="db_inline" v-if="loginType==='kindergarten'">
            <div class="db_inline">
              班级：
              <Select v-model="searchparam.clazzId" style="width:140px" @on-change="queryFn">
                <Option v-for="item in clazzList" :value="item.id" :key="item.id">{{ item.name }}</Option>
              </Select>
            </div>
            学生：
            <Input v-model="searchparam.name" @on-change="queryFn" placeholder="学生姓名关键字"
                   style="width: 100px;margin-right: 4px;"/>
            IC卡：
            <Input v-model="searchparam.icCard" @on-change="queryFn" placeholder="学生IC卡号"
                   style="width: 100px;margin-right: 4px;"/>
          </div>
          <div class="db_inline">
            体温：
            <Select v-model="searchparam.temperatureState" style="width:80px" @on-change="queryFn">
              <Option v-for="item in statusList" :value="item.id" :key="item.id">{{ item.name }}</Option>
            </Select>
          </div>
          <div class="db_inline">
            体温状态：
          </div>
          <div class="db_inline">
            手口眼状态：
          </div>
          <div class="db_inline">
            体检时间段：
            <DatePicker type="date" placeholder="开始时间" v-model="searchparam.bTime" @on-change="searchparam.bTime=$event"
                        style="width: 110px"></DatePicker>
            至
            <DatePicker type="date" placeholder="结束时间" v-model="searchparam.eTime" @on-change="searchparam.eTime=$event"
                        style="width: 110px"></DatePicker>
          </div>
          <span @click="queryFn">
              			<Button type="info"><Icon type="search"></Icon>搜索</Button>
        			</span>
          <span @click="restFn">
              			<Button type="ghost"><Icon type="refresh"></Icon>刷新</Button>
        			</span>
        </div>
        <div class="control">
          <Button @click="exportReportFn" type="info">
            <Icon type="navicon" size="20"></Icon>
            <span>全部导出</span>
          </Button>
          <Button @click="exportReportFn5" type="info">
            <Icon type="navicon" size="20"></Icon>
            <span>导出选中</span>
          </Button>
          <Button @click="exportReportFn1" type="info">
            <Icon type="navicon" size="20"></Icon>
            <span>导出手口眼+体温异常</span>
          </Button>
          <Button @click="exportReportFn3" type="info">
            <Icon type="navicon" size="20"></Icon>
            <span>只导出体温异常</span>
          </Button>
          <Button @click="exportReportFn4" type="info">
            <Icon type="navicon" size="20"></Icon>
            <span>只导出手口眼异常</span>
          </Button>
          <Button @click="exportReportFn2" type="info">
            <Icon type="navicon" size="20"></Icon>
            <span>导出正常</span>
          </Button>
          <Button type="warning" @click="batchDelect">
            <Icon type="ios-trash-outline"></Icon>
            <span>批量删除</span>
          </Button>
          <!--  <Button @click="staticsFn" type="info">
              <Icon type="stats-bars" size="20"></Icon>
              <span>统计</span>
            </Button>-->
        </div>
      </Row>
      <Row class="margin-top-10">
        <Table @on-selection-change="selectChange" :height='tableHeight' ref="backgroundTable" :columns="dataColumns"
               :data="dataTable"></Table>
      </Row>
      <Row type="flex" justify="end" class="footer">
        <div class="margin-top-10">
          <Page :total="searchparam.total" :current="searchparam.current" :page-size="searchparam.size"
                @on-change="pageChange" show-elevator></Page>
        </div>
      </Row>
      <Modal v-model="modalDelete" title="警告" v-on:on-ok="deleteOk">
        <Icon type="minus-circled" style="color: red"></Icon>
        您确定要删除该数据?
      </Modal>
    </Card>
  </div>
</template>

<script>
import API from "@/api/api";
import VmBtable from "@/components/vm/vm-btable";
import vueUpload from "@/components/views/upload/Upload";
import Cookie from "js-cookie"

export default {
  name: "Background",
  components: {
    VmBtable,
    vueUpload,
  },
  data() {
    return {
      dataDelete: [],
      operateData: [],
      batchDel: false,
      modalEdit: false,
      modalAdd: false,
      modalDelete: false,
      cutHeight: 280,
      tableHeight: 640,
      searchTitle: '',
      clazzList: [],
      statusList: [
        {id: ' ', name: '全部'},
        {id: '正常', name: '正常'},
        {id: '偏低', name: '偏低'},
        {id: '偏高', name: '偏高'},
      ],
      loginType: Cookie.getJSON('loginType'),
      searchparam: {
        current: 1,
        size: 20,
        name: '',
        icCard: '',
        clazzId: '',
        temperatureState: '',
        bTime: '',
        eTime: '',
      },
      dataColumns: [{
        type: 'selection',
        align: 'center',
        minWidth: 30
      }, {
        type: 'index',
        title: '序号',
        align: 'center',
        minWidth: 60
      },
        {
          title: '班级',
          key: 'clazzName',
          minWidth: 160,
          align: 'center'
        },
        {
          title: '学生名',
          key: 'name',
          align: 'center',
          minWidth: 100
        },
        {
          title: '性别',
          key: 'sex',
          minWidth: 100,
          align: 'center',
        },
        {
          title: '年龄',
          key: 'age',
          align: 'center',
          minWidth: 80,
          render: (h, param) => {
            let age = param.row.age;
            let ageStr = age > 0 ? age : '-';
            return h('div', {}, ageStr);
          }
        },
        {
          title: '体检时间',
          key: 'reportTime',
          sortable: true,
          sortType: 'desc',
          align: 'center',
          minWidth: 200,
        },
        {
          title: '身高(cm)',
          key: 'height',
          align: 'center',
          minWidth: 120
        },
        {
          title: '体重(kg)',
          key: 'weight',
          align: 'center',
          minWidth: 120
        },
        {
          title: '体温(℃)',
          key: 'temperature',
          align: 'center',
          minWidth: 160,
          render: (h, param) => {
            return h('div', {}, param.row.temperature)
          }
        },
        {
          title: '体温状态',
          key: 'temperatureState',
          align: 'center',
          minWidth: 160,
          render: (h, param) => {
            return h('div', {}, param.row.temperatureState)
          }
        }, {
          title: '手口眼状态',
          key: 'status',
          align: 'center',
          minWidth: 160,
          render: (h, param) => {
            return h('div', {}, param.row.status == "1" || param.row.status == "" || param.row.status == "4" ? "正常" : "异常")
          }
        },
        {
          title: 'BMI',
          key: 'bmi',
          minWidth: 150,
          align: 'center',
        },
        {
          title: 'BMI状态',
          key: 'bmiState',
          minWidth: 150,
          align: 'center',
        },
        {
          title: '操作',
          align: 'center',
          minWidth: 160,
          render: (h, params) => {
            let btn = [];
            let detailBtn = h('Button', {
              props: {
                type: 'info',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.detailFn(params.row)
                }
              }
            }, '详情');
            // let historyBtn = h('Button', {
            //   props: {
            //     type: 'info',
            //     size: 'small'
            //   },
            //   style: {
            //     marginRight: '5px'
            //   },
            //   on: {
            //     click: () => {
            //       this.detailFn(params.row)
            //     }
            //   }
            // }, '历史统计');
            let deleteBtn = h('Button', {
              props: {
                type: 'info',
                size: 'small'
              },
              style: {
                marginRight: '5px'
              },
              on: {
                click: () => {
                  this.modalDelete = true;
                  this.dataDelete = []
                  this.dataDelete.push(params.row);

                }
              }
            }, '删除');
            btn.push(detailBtn);
            btn.push(deleteBtn);

            return h('div', btn);
          }
        }
      ],
      dataTable: [],
    }
  },
  methods: {
    deleteFn() {
      var that = this;
      for (let i = 0; i < that.dataDelete.length; i++) {
        API.deleteReport({
          id: that.dataDelete[i].id
        }).then(resp => {
          this.queryFn();
        })
      }
    },
    queryFn() {
      API.fetchReport(this.searchparam).then(resp => {
        this.dataTable = resp.data.records;
        this.searchparam.total = resp.data.total;
        this.searchparam.current = resp.data.current;
      })
    }
    ,
    selectChange: function (data) {
      this.batchDel = true;
      this.dataDelete = data;
    },
    deleteOk: function () {
      this.deleteFn();
    },
    batchDelect() {
      if (this.batchDel) {
        this.modalDelete = true;
      } else {
        this.$Message.error('选择需要删除的选项!');
      }
    },
    getClazzFn() {
      API.fetchKindergartenClazz().then(resp => {
        this.clazzList.push({
          id: ' ',
          name: '-全部-'
        });
        for (let i in resp.data) {
          this.clazzList.push(resp.data[i]);
        }
      })
    },
    pageChange(val) {
      this.searchparam.current = val;
      this.queryFn();
    },
    detailFn(data) {
      var URLRexExp = new RegExp(/^[A-Za-z]+:\/\/[A-Za-z0-9-_]+.[A-Za-z0-9-_%&\?\/.:=]+$/);
      if (!URLRexExp.test(data.photo)) {
        data.photo = "http://wy-file.wekids.group/" + data.photo
      }
      if (!URLRexExp.test(data.handPhoto)) {
        data.handPhoto = "http://wy-file.wekids.group/" + data.handPhoto
      }
      if (!URLRexExp.test(data.mouthPhoto)) {
        data.mouthPhoto = "http://wy-file.wekids.group/" + data.mouthPhoto
      }
      if (!URLRexExp.test(data.handDownPhoto)) {
        data.handDownPhoto = "http://wy-file.wekids.group/" + data.handDownPhoto
      }
      if (!URLRexExp.test(data.evesPhoto)) {
        data.evesPhoto = "http://wy-file.wekids.group/" + data.evesPhoto
      }
      debugger
      if (data.photo != "http://wy-file.wekids.group/" && data.photo != "http://wy-file.wekids.group/undefined") {

        window.open(data.photo, '照片', 'width=665,height=515,top=100, left=100,menubar=no,toolbar=no,status=no,scrollbars=yes');
      }
      if (data.handPhoto != "http://wy-file.wekids.group/" && data.handPhoto != "http://wy-file.wekids.group/undefined") {

        window.open(data.handPhoto, '手心照片', 'width=665,height=515,top=100, left=615,menubar=no,toolbar=no,status=no,scrollbars=yes');
      }
      if (data.mouthPhoto != "http://wy-file.wekids.group/" && data.mouthPhoto != "http://wy-file.wekids.group/undefined") {

        window.open(data.mouthPhoto, '口照片', 'width=665,height=515,top=765, left=100,menubar=no,toolbar=no,status=no,scrollbars=yes');
      }
      if (data.handDownPhoto != "http://wy-file.wekids.group/" && data.handDownPhoto != "http://wy-file.wekids.group/undefined") {

        window.open(data.handDownPhoto, '手背照片', 'width=665,height=515,top=765, left=615,menubar=no,toolbar=no,status=no,scrollbars=yes');
      }
      if (data.evesPhoto != "http://wy-file.wekids.group/" && data.evesPhoto != "http://wy-file.wekids.group/undefined") {
        window.open(data.evesPhoto, '眼照片', 'width=665,height=515,top=765, left=1000,menubar=no,toolbar=no,status=no,scrollbars=yes');
      }
    },
    restFn() {
      this.searchparam.name = '';
      this.searchparam.bTime = '';
      this.searchparam.eTime = '';
      this.searchparam.clazzId = '';
      this.searchparam.icCard = '';
      this.searchparam.temperatureState = '';
      this.searchparam.status = '';
      this.searchparam.current = 1;
      this.queryFn();
    },
    exportReportFn() {
      this.$Modal.confirm({
        title: '提示',
        content: '是否导出全部报告？',
        onOk: () => {
          API.exportReport(this.searchparam);
        },
        onCancel: () => {

        }
      })
    },
    exportReportFn1() {
      this.$Modal.confirm({
        title: '提示',
        content: '是否导出导出手口眼+体温异常的报告？',
        onOk: () => {
          API.exportReport1(this.searchparam);
        },
        onCancel: () => {

        }
      })
    },
    exportReportFn2() {
      this.$Modal.confirm({
        title: '提示',
        content: '是否导出正常的报告？',
        onOk: () => {
          API.exportReport2(this.searchparam);
        },
        onCancel: () => {

        }
      })
    }, exportReportFn3() {
      this.$Modal.confirm({
        title: '提示',
        content: '是否只导出体温异常的报告？',
        onOk: () => {
          API.exportReport3(this.searchparam);
        },
        onCancel: () => {

        }
      })
    }, exportReportFn4() {
      this.$Modal.confirm({
        title: '提示',
        content: '是否只导出手口眼异常的报告？',
        onOk: () => {
          API.exportReport4(this.searchparam);
        },
        onCancel: () => {

        }
      })
    }, exportReportFn5() {
      var that = this
      this.$Modal.confirm({
        title: '提示',
        content: '是否导出选择的报告？',
        onOk: () => {
          let x = ""
          for (let i = 0; i < that.dataDelete.length; i++) {
            if (i == that.dataDelete.length - 1) {
              x += that.dataDelete[i].id
            } else {
              x += that.dataDelete[i].id + "|"
            }
          }
          API.exportReport5({xx: x})
        },
        onCancel: () => {

        }
      })
    },
    cancelFn() {
    },
    complete() {
    },
    submitFn() {
    },
    setHeight() {
      this.tableHeight = window.innerHeight - this.$refs.backgroundTable.$el.offsetTop - this.cutHeight;
    }
  },
  mounted() {
    this.queryFn();
    this.setHeight();
    if (this.loginType === 'kindergarten') {
      this.getClazzFn();
    }
  },

}
</script>

<style scoped>
.bg_img {
  height: 200px;
  width: 350px;
}
</style>
